<template>
	<view class="order-content">
		<view @click="$u.route('/pages/subpage/list/serv_detail',{id:serveId})" class="order-view">
			<view class="u-flex-1 u-font-30 font-medium">
				{{serve.title || ''}}
			</view>
			<view class="u-type-error">
				￥<text class="u-font-30">{{serve.price || ''}}</text>
			</view>
		</view>
		<u-form ref="infoForm" :model="infoForm" label-width="auto">
			<u-form-item label="服务地址" prop="address" right-icon="arrow-right">
				<u-input type="text" disabled input-align="right" v-model="infoForm.address" :clearable="false"
					@click="toLocation" placeholder="请选择"></u-input>
			</u-form-item>
			<u-form-item label="服务时间" prop="serve_time" right-icon="arrow-right">
				<u-input type="text" disabled input-align="right" v-model="infoForm.serve_time" :clearable="false"
					@click="showTimePicker = true" placeholder="请选择"></u-input>
			</u-form-item>
			<u-form-item label="详细描述您的需求内容" prop="content" label-position="top" :border-bottom="false">
				<u-input type="textarea" maxlength="500" height="354" v-model="infoForm.content" border :clearable="false"
					placeholder="请输入详细需求内容"></u-input>
			</u-form-item>
		</u-form>

		<u-picker v-model="showTimePicker" mode="time" :start-year="startYear"
			:params="{year: true,month: true,day: true,hour:true , minute:true}" :confirm-color="$appConfig.mainColor"
			@confirm="selectTimeHandle"></u-picker>
	</view>
</template>

<script>
	export default {
		props: {
			serveId: {
				type: [Number, String],
				default: ''
			}
		},
		data() {
			return {
				infoForm: {
					address: '',
					serve_time: '',
					address: '',
					content: '',
					lng: '',
					lat: ''
				},
				serve: {},
				showTimePicker: false
			}
		},
		computed: {
			startYear() {
				const now = new Date();
				const year = now.getFullYear()
				return year
			}
		},
		mounted() {
			console.log(this.serveId);
			this.queryServeDetail()
		},
		methods: {
			selectTimeHandle(value) {
				const {
					year,
					month,
					day,
					hour,
					minute
				} = value;
				this.infoForm.serve_time = `${year}-${month}-${day} ${hour}:${minute}`
			},
			toLocation() {
				uni.$on('selectLocation', (data) => {
					console.log(data);
					const {
						province,
						city,
						district,
						street,
						location,
						address
					} = data
					this.infoForm.address = address
					this.infoForm.lng = location.split(',')[0]
					this.infoForm.lat = location.split(',')[1]
				})
				this.$u.route('/pages/subpage/list/location')
			},
			queryServeDetail() {
				this.$u.api.serveDetail(this.serveId).then(res => {
					this.serve = res
				})
			},
			getSubData() {
				if (!this.infoForm.address) {
					this.$u.toast('请选择地址')
					return false
				}
				if (!this.infoForm.serve_time) {
					this.$u.toast('请选择服务时间')
					return false
				}
				if (!this.infoForm.content) {
					this.$u.toast('请填写您的需求内容')
					return false
				}
				return this.infoForm
			}
		}
	}
</script>

<style scoped lang="scss">
	.order-content {
		background-color: #fff;
		height: 100%;
		padding: 0 30rpx;
	}

	.order-view {
		display: flex;
		padding: 28rpx;
		border-radius: 20rpx;
		background: #F6F6F6;

		&:before {
			content: "";
			display: inline-block;
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: #999;
			margin-right: 16rpx;
			margin-top: 16rpx;
		}
	}
</style>